<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="importCard">
        <!-- 头部 -->
        <h2 class="importTitle">{{ $route.query.name }}导入</h2>
        <div v-if="$route.query.name === '考勤'" class="before">
          <i class="el-icon-info" />
          如果某员工已有打卡记录，最新上传的不覆盖原有数据。可上传多名员工的打卡记录。每名员工可上传多条记录，同考勤日内取员工第一次和最后一次打卡时间。
        </div>
        <!-- 这个花裤衩的上传组件可以传入一个 onSuccess 属性, 是一个函数
  每当excel文件传入成功就会执行 -->
        <UploadExcel :on-success="upload" />
      </el-card>

    </div>
  </div>
</template>

<script>
import { importEmployee } from '@/api/employees'
import { importAttendances } from '@/api/attendances'
export default {
  methods: {
    async upload(data) {
      if (this.$route.query.name === '考勤') {
        console.log(1)
        // const dict = {
        //   '姓名': 'name',
        //   '工号': 'workNumber',
        //   '手机号': 'mobile',
        //   '部门': 'department',
        //   '事假天数': 'leaveDays',
        //   '调休天数': 'dayOffLeaveDays',
        //   '正常天数': 'normalDays',
        //   '迟到次数': 'laterTimes',
        //   '早退次数': 'earlyTimes',
        //   '旷工天数': 'absenceDays',
        //   '是否全勤': 'isFullAttendanceint',
        //   '实际出勤天数(正式)': 'actualAtteOfficialDays',
        //   '应出勤工作日': 'workingDays',
        //   '计薪天数': 'salaryOfficialDays'
        // }
        //  处理...
        await importAttendances(data)
        this.$message.success('上传成功')
        this.$router.back()
      } else {
        // 这里再excel数据传入成功后执行
      // 准备字典
        const dict = {
          '入职日期': 'timeOfEntry',
          '手机号': 'mobile',
          '姓名': 'username',
          '转正日期': 'correctionTime',
          '工号': 'workNumber',
          '部门': 'departmentName',
          '聘用形式': 'formOfEmployment'
        }
        // 现在我们的  data.results 是一个数组, 里面包裹着多个用户
        // 我希望遍历这个数组, 拿出每个用户单独处理
        console.log(data.results)
        const userData = data.results.map(user => {
          return this.translate(user, dict)
        })
        console.log(userData)

        await importEmployee(userData)

        this.$message.success('上传成功')

        this.$router.back()
      }
    },

    // 翻译
    translate(user, dict) {
      const newUser = {}
      // 如果人工进行翻译应该如下
      // newUser.username = '高大山'
      // 其中需要的数据一个是 英文的 key
      // 第二个是原来的 user 中的 value 值
      for (const key in user) {
        const enKey = dict[key]
        const value = user[key]
        // 如果是时间的数据不能直接放,而是应该进行转换
        if (enKey === 'timeOfEntry' || enKey === 'correctionTime') {
          newUser[enKey] = new Date(this.formatDate(value, '/'))
        } else {
          newUser[enKey] = value
        }
      }
      return newUser
    },
    // 转换 excel 导入时 五位数的时间格式
    formatDate(numb, format) {
      const time = new Date((numb - 1) * 24 * 3600000 + 1)
      time.setYear(time.getFullYear() - 70)
      const year = time.getFullYear() + ''
      const month = time.getMonth() + 1 + ''
      const date = time.getDate() - 1 + ''
      if (format && format.length === 1) {
        return year + format + month + format + date
      }
      return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date)
    }
  }
}
</script>

<style lang="scss" scoped>
.importCard{
  padding-bottom: 100px;
  .importTitle{
    text-align: center;
}
}
.before {
  line-height: 34px;
  width: 100%;
  background-color: #fdf6ec;
  color: #e6a28b;
  display: inline-block;
  padding: 0px 10px;
  border-radius: 3px;
  font-size: 12px;
  i {
    margin-right: 5px;
    color: #e6a23c;
  }
}

</style>
